<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>原价：{{price}}</h1>
        <h1>计算属性价格:{{comPrice}}</h1>
        <h1>vip价格：{{vipPrice}}</h1>
        <h1>svip价格：{{svipPrice}}</h1>
        <button @click="changePrice">修改原价</button>
    </div>
</body>
<script>
    const app = {
        // 创建之后执行
        created() {
            const wa = this.$watch('price', (newVal) => {
                console.log('111111:' + newVal);
            })
            setTimeout(() => {
                // 关闭侦听器，price变化不再监听
                wa()
            }, 5000)
        },
        data() {
            return {
                price: 100,
                vipPrice: 50,
                svipPrice: 10
            }
        },
        methods: {
            changePrice() {
                this.price += 100

            }
        },
        watch: {
            // 侦听器的名称就是监听数据名称
            // price(current,price){
            //     //current为最新值，price为原来的值
            //     console.log(current,price)
            //   setTimeout(() => {
            //     this.vipPrice = current * 0.5
            //     this.svipPrice = current * 0.1
            //   }, 100);
            // }

            price: {
                handler(current, price) {
                    //current为最新值，price为原来的值
                    console.log(current, price)
                    setTimeout(() => {
                        this.vipPrice = current * 0.5
                        this.svipPrice = current * 0.1
                    }, 100);

                    Vue.onWatcherCleanup(() => {
                        console.log("清除副作用，即异步操作");

                    })
                },
                immediate: true,//强制立即执行一次，配置非惰性
                deep: true,//配置深度监听，一般不使用，性能消耗大
                // once: true, // 配置一次性的侦听器，只会监听第一次变化

            },

        },
        computed: {
            comPrice() {
                return this.price * 0.8
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>
<!-- 
    计算属性：
    1. 会立即执行一次(非惰性)
    2. 计算属性有缓存
    3. 计算属性一次可以监听多个值
    4. 计算属性是多个值影响一个值
    5. 计算属性需要有一个返回值
    6. 计算属性不能异步 延时器

    侦听器：
    1. 不会立即执行一次(惰性)
    2. 侦听器没有缓存
    3. 侦听器一次只能监听一个值
    4. 侦听器一个值影响多个值
    5. 侦听器不需要返回值
    6. 侦听器可以使用异步
-->